<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">
            {{
            route.breadcrumbName
            }}
          </span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">
            {{
            route.breadcrumbName
            }}
          </router-link>
        </template>
      </a-breadcrumb>
    </div>
    <div id="content" style="margin: 24px">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <!-- 经停港口 -->
        <a-card>
          <div class="card-title">经停港口</div>
          <!-- 始发港 -->
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="始发港" prop="firstPort">
                <!-- <a-select v-model="form.firstPort">
                  <a-select-option value>请选择</a-select-option>
                  <a-select-option
                    v-for="item in selectData"
                    :key="item.id"
                    :value="item.name+'&'+item.id"
                  >{{item.name}}</a-select-option>
                </a-select>-->
                <a-select
                  show-search
                  :show-arrow="false"
                  :filter-option="false"
                  :default-active-first-option="false"
                  :not-found-content="null"
                  v-model="form.firstPort"
                  @search="portChange"
                  @select="portListReset"
                >
                  <a-select-option key>请选择</a-select-option>
                  <a-select-option
                    v-for="item in selectData"
                    :key="item.id"
                    :value="item.name + '&' + item.id"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" :style="'margin-top: 10px;'">
              <a-icon
                type="plus-circle"
                theme="filled"
                :style="'color:#1391FE;fontSize:20px;margin-right:15px;'"
                @click="addPort"
              />
            </a-col>
          </a-row>
          <!-- 经停港 -->
          <template v-if="form.portArray.length > 0">
            <a-row v-for="(port, index) in form.portArray" :key="port.key" :gutter="[16]">
              <a-col :span="12">
                <a-form-model-item
                  :key="port.key"
                  label="经停港"
                  :prop="'portArray.' + index + '.value'"
                  :rules="{
                    required: true,
                    message: '必填项不能为空',
                    trigger: ['blur', 'change'],
                  }"
                >
                  <!-- <a-select v-model="port.value">
                    <a-select-option value>请选择</a-select-option>
                    <a-select-option
                      v-for="item in selectData"
                      :key="item.id"
                      :value="item.name+'&'+item.id"
                    >{{item.name}}</a-select-option>
                  </a-select>-->
                  <a-select
                    show-search
                    :show-arrow="false"
                    :filter-option="false"
                    :default-active-first-option="false"
                    :not-found-content="null"
                    v-model="port.value"
                    @search="portChange"
                    @select="portListReset"
                  >
                    <a-select-option key>请选择</a-select-option>
                    <a-select-option
                      v-for="item in selectData"
                      :key="item.id"
                      :value="item.name + '&' + item.id"
                    >{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12" :style="'margin-top: 10px;'">
                <a-icon
                  type="plus-circle"
                  theme="filled"
                  :style="'color:#1391FE;fontSize:20px;margin-right:15px;'"
                  @click="addPort"
                />
                <a-icon
                  type="minus-circle"
                  theme="filled"
                  :style="'color:#EB5454;fontSize:20px;'"
                  @click="removePort(port)"
                />
              </a-col>
            </a-row>
          </template>
          <!-- 目的港 -->
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="目的港" prop="lastPort">
                <!-- <a-select v-model="form.lastPort">
                  <a-select-option value>请选择</a-select-option>
                  <a-select-option
                    v-for="item in selectData"
                    :key="item.id"
                    :value="item.name+'&'+item.id"
                  >{{item.name}}</a-select-option>
                </a-select>-->
                <a-select
                  show-search
                  :show-arrow="false"
                  :filter-option="false"
                  :default-active-first-option="false"
                  :not-found-content="null"
                  v-model="form.lastPort"
                  @search="portChange"
                  @select="portListReset"
                >
                  <a-select-option key>请选择</a-select-option>
                  <a-select-option
                    v-for="item in selectData"
                    :key="item.id"
                    :value="item.name + '&' + item.id"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <!-- 航线信息 -->
        <a-card>
          <div class="card-title">航线信息</div>
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="航线类型" prop="type">
                <a-select v-model="form.type">
                  <a-select-option value>请选择</a-select-option>
                  <a-select-option value="E">E</a-select-option>
                  <a-select-option value="W">W</a-select-option>
                  <a-select-option value="S">S</a-select-option>
                  <a-select-option value="N">N</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="船舶类型" prop="isSelfOperation">
                <a-select v-model="form.isSelfOperation">
                  <a-select-option value>请选择</a-select-option>
                  <a-select-option :value="1">自营</a-select-option>
                  <a-select-option :value="0">租赁</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <!-- <a-row :gutter="[16]" v-if="form.isSelfOperation === 1"> -->
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="油耗" prop="oilConsumption">
                <!-- <a-input v-model="form.oilConsumption" :max-length="limitNumber" /> -->
                <a-input-number
                  :min="0"
                  :max="999999.9999"
                  :precision="4"
                  v-model="form.oilConsumption"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" :style="'margin-top: 10px;'">吨/航次</a-col>
          </a-row>
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="装载量" prop="loadingCapacity">
                <!-- <a-input v-model="form.loadingCapacity" :max-length="limitNumber" /> -->
                <a-input-number
                  :min="0"
                  :max="999999999999"
                  :precision="0"
                  v-model="form.loadingCapacity"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" :style="'margin-top: 10px;'">TEU</a-col>
          </a-row>
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="航线租金收入">
                <!-- <a-input v-model="form.costIncome" :max-length="limitNumber" /> -->
                <a-input-number
                  :min="0.01"
                  :max="999999999999.99"
                  :precision="2"
                  v-model="form.costIncome"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" :style="'margin-top: 10px;'">元/航次</a-col>
          </a-row>
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="航线租金支出">
                <!-- <a-input v-model="form.costPay" :max-length="limitNumber" /> -->
                <a-input-number
                  :min="0.01"
                  :max="999999999999.99"
                  :precision="2"
                  v-model="form.costPay"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" :style="'margin-top: 10px;'">元/航次</a-col>
          </a-row>
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="航线里程" prop="mileage">
                <!-- <a-input v-model="form.mileage" :max-length="limitNumber" /> -->
                <a-input-number
                  :min="0.001"
                  :max="999999999999.999"
                  :precision="3"
                  v-model="form.mileage"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" :style="'margin-top: 10px;'">公里</a-col>
          </a-row>
          <a-row :gutter="[16]">
            <a-col :span="12">
              <a-form-model-item label="航线状态" prop="status">
                <a-select v-model="form.status">
                  <a-select-option value>请选择</a-select-option>
                  <a-select-option value="1">正常</a-select-option>
                  <a-select-option value="2">冻结</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </div>
    <div class="creat_button">
      <a-button
        type="primary"
        @click="save"
        :loading="createStatus"
        style="float: right; margin-top: 12px"
      >保存</a-button>
    </div>
  </div>
</template>
<script>
import _ from 'lodash/debounce'
import { queryPortNameList, addShipRoute } from '@/api/shipCenter'
const fomrMessage = `必填项不能为空`

export default {
  data () {
    this.portChange = _(this.portChange, 800)
    return {
      basePath: '/shipCenter',
      routes: [
        {
          path: '/routeManagement',
          breadcrumbName: '航线管理'
        },
        {
          path: '',
          breadcrumbName: '创建航线'
        }
      ],
      selectData: [],
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      limitNumber: 20,
      form: {
        isSelfOperation: '', // 是否自营
        type: '', // 航线类型
        loadingCapacity: '', // 装载量
        costPay: '', // 航线支出
        costIncome: '', // 航线收入
        oilConsumption: '', // 油耗
        mileage: '', // 里程
        status: '1', // 航线状态
        firstPort: '', // 始发港
        lastPort: '', // 目的港
        portArray: [] // 经停港
      },
      rules: {
        isSelfOperation: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        type: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        loadingCapacity: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        costIncome: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        // oilConsumption: [
        //   { required: true, message: fomrMessage, trigger: 'blur' }
        // ],
        mileage: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        status: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        firstPort: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        lastPort: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      },
      btnControl: {},
      createStatus: false
    }
  },
  methods: {
    portListReset () {
      this.queryPortName({
        status: 1
      })
    },
    portChange (e) {
      this.queryPortName({
        nameLike: e,
        status: 1
      })
    },
    queryPortName (paramData) {
      queryPortNameList(paramData)
        .then((res) => {
          // // console.log(res)
          this.selectData = res.data
        })
        .catch((rs) => {})
    },
    addRoute (e) {
      this.createStatus = true
      addShipRoute(e)
        .then((res) => {
          if (res.code === 0) {
            this.$message.success('添加成功！')
            setTimeout(() => {
              this.createStatus = false
              this.$router.push(`/shipCenter/routeManagement`)
            }, 1000)
          }
        })
        .catch((rs) => {
          this.createStatus = false
        })
    },
    addPort () {
      this.form.portArray.push({
        value: '',
        key: Date.now()
      })
    },
    removePort (e) {
      let index = this.form.portArray.indexOf(e)
      if (index !== -1) {
        this.form.portArray.splice(index, 1)
      }
    },
    save () {
      if (!this.btnControl.create) {
        this.$message.error('您无此权限！')
        return false
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let _form = this.form
          let shipRoutePortList = []
          shipRoutePortList.push({
            sort: 0,
            portId: _form.firstPort.split('&')[1],
            portName: _form.firstPort.split('&')[0]
          })
          for (let i = 0; i < _form.portArray.length; i++) {
            shipRoutePortList.push({
              sort: i + 1,
              portId: _form.portArray[i].value.split('&')[1],
              portName: _form.portArray[i].value.split('&')[0]
            })
          }
          shipRoutePortList.push({
            sort: shipRoutePortList.length,
            portId: _form.lastPort.split('&')[1],
            portName: _form.lastPort.split('&')[0]
          })
          delete _form.firstPort
          delete _form.lastPort
          delete _form.portArray
          this.addRoute({
            ..._form,
            shipRoutePortList: shipRoutePortList
          })
        }
      })
    }
  },
  created () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc);
    })
    // // console.log(this.form.portArray)
    this.queryPortName({
      status: 1
    })
  }
}
</script>

<style lang="less" scoped>
#content {
  margin: 24px 0;
  .ant-card {
    margin-bottom: 20px;
    .card-title {
      position: relative;
      padding-left: 16px;
      font-size: 18px;
      line-height: 1;
      color: #000;
      margin-bottom: 20px;
      &:before {
        content: '';
        width: 5px;
        height: 18px;
        background: #1890ff;
        border-radius: 4px;
        position: absolute;
        left: 0;
        top: -1px;
      }
    }
  }
}
</style>
